<template>
    <list-page
        :pager="pager"
        :showSelectSearch="false"
        :showSearch="false"
        placeholder="请输入合同名称"
        hideShadow
        :selectList="[20,30,50]"
        @searchByKey="searchByKey"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
        @selectionChange="selectionChange"
        @clearSearchKeywords="getListData({clientProviderName: '', current: 1})">
        <template slot="table">
            <el-table
                :data="contractData"
                align="center"
                ref="multipleTable">
                <el-table-column label="序号"  width="60" type="index"></el-table-column>
                <el-table-column label="合同编码" prop="contractNumber"></el-table-column>
       <!--         <el-table-column label="合同名称" prop="contractName"></el-table-column>-->
                <el-table-column label="租赁资源"   prop="contractSource"></el-table-column>
                <el-table-column label="租赁面积(m²)" prop="area"></el-table-column>
                <el-table-column label="合同开始日期" prop="startTime">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.startTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="合同结束日期" prop="endTime">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="合同签订日期" prop="signTime">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.signTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="合同总租金(元)" prop="totalAmount"></el-table-column>
            </el-table>
        </template>
    </list-page>
</template>

<script>
    import pager from '@/assets/vue-mixin/pager'
    import {get} from "~/utils/dbl"
    import {mapState} from 'vuex'
    import {getReContract} from '../api/clientprovider.js'
    export default {
        name: "contract-info",
         mixins: [pager],
        props:['pid'],
        contractName:['contractName'],
        mounted(){
            this.getListData();
        },
        data(){
            return{
                contractData:[],
                searchForm:{},
                // 请求参数
                params: {
                    current: 1,
                    size: 20,
                    contractName: ''
                },
                // 选中的数据
                selectDataArr: [],
                // 分页
                pager: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                // 页面loading
                loading: false,
            }
        },
        methods:{
            formatDate(date){ //设置时间转换格式

                date = new Date(date)
                var y = date.getFullYear();  //获取年

                var m = date.getMonth() + 1;  //获取月

                m = m < 10 ? '0' + m : m;  //判断月是否大于10

                var d = date.getDate();  //获取日

                d = d < 10 ? ('0' + d) : d;  //判断日期是否大10

                return y + '-' + m + '-' + d;  //返回时间格式

            },
            searchReset() {
                // console.log("====searchReset")
                //清空选中的数据
                this.searchForm = {}
                //重新查询
                this.resetList()
            },
            // 数据请求
            getListData(params = {}) {
                this.loading = true
                let requestData = {...this.params, ...params}
                getReContract(Object.assign(
                    requestData,
                    { clientProviderId: this.pid
                    })).then(res => {
                    const { current, size, total, records } = res.data.data
                    this.contractData = records
                    this.params = requestData
                    this.pager = {
                        total,
                        currentPage: current,
                        pageSize: size
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            // 搜索监听
            searchByKey(val) {
                this.getListData({contractName: val, current: 1});
                this.resetList()
            },
            // 选中监听
            selectionChange(val) {
                this.selectDataArr = val;
            },
            // 修改单页数据条数
            changePageSize(size) {
                this.getListData({current:1, size})
            },
            // 翻页
            changeCurrentPage(current) {
                this.getListData({current})
            },

        }
    }
</script>


